import { createApp } from 'vue'
const app = createApp(App)

// element配置
import ElementPlus from 'element-plus' // 组建
import * as ElementPlusIconsVue from '@element-plus/icons-vue' // icon
import zhCn from 'element-plus/es/locale/lang/zh-cn' // 汉化
import 'element-plus/theme-chalk/el-overlay.css'
import 'element-plus/theme-chalk/el-message-box.css'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(ElementPlus, { locale: zhCn })

// 基础样式配置
import './styles/common.scss'

// 路由配置
import router from './router'
app.use(router)

// store
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
app.use(pinia)

// 全局组件
import BcContainer from './components/bcLayout/BcContainer.vue'
import BcModal from './components/BcModal.vue'
app.component('bc-container', BcContainer)
app.component('bc-modal', BcModal)

// 图片预览全局组件
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
app.use(Viewer, {
  Options: {
    inline: true,
    button: true, //右上角按钮
    navbar: true, //底部缩略图
    title: true, //当前图片标题
    toolbar: true, //底部工具栏
    tooltip: true, //显示缩放百分比
    movable: true, //是否可以移动
    zoomable: true, //是否可以缩放
    rotatable: true, //是否可旋转
    scalable: true, //是否可翻转
    transition: true, //使用 CSS3 过度
    fullscreen: true, //播放时是否全屏
    url: 'data-source',
  },
})

// 自定义指令
import { permission } from './directive/permission'
app.directive('perm', permission)

// 挂载
import App from './App.vue'
app.mount('#app')
